<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专利信息管理</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">

    <h1 class="mt-5" style="text-align: center;">专利信息管理</h1>

    <table class="table table-striped mt-3">
        <thead>
        <tr>
            <th scope="col" style="width:85px;">专利编号</th>
            <th scope="col">专利名</th>
            <th scope="col">专利持有者</th>
            <th scope="col">交易价</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="patentTableBody">
        <!-- 动态生成专利信息 -->
        </tbody>
    </table>
    <!-- 添加专利按钮，触发添加专利模态框 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPatentModal" style="float: right">添加专利</button>
</div>
<!-- 添加搜索功能 -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="搜索专利名或持有者..." id="searchInput">
    <button class="btn btn-outline-secondary" type="button" onclick="searchPatents()">搜索</button>
</div>

<!-- 添加专利模态框 -->
<div class="modal fade" id="addPatentModal" tabindex="-1" aria-labelledby="addPatentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addPatentModalLabel">添加专利</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 添加专利的表单 -->
                <form id="addPatentForm">
                    <div class="mb-3">
                        <label for="patentName" class="form-label">专利名</label>
                        <input type="text" class="form-control" id="patentName" required>
                    </div>
                    <div class="mb-3">
                        <label for="owner" class="form-label">专利持有者</label>
                        <input type="text" class="form-control" id="owner" required>
                    </div>
                    <div class="mb-3">
                        <label for="transactionPrice" class="form-label">交易价</label>
                        <input type="number" step="0.01" class="form-control" id="transactionPrice" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <!-- 点击添加按钮，提交表单并添加专利 -->
                <button type="button" class="btn btn-primary" onclick="addPatent()">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑专利模态框 -->
<div class="modal fade" id="editPatentModal" tabindex="-1" aria-labelledby="editPatentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editPatentModalLabel">编辑专利</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editPatentForm">
                    <input type="hidden" id="patentIdEdit" value="">
                    <div class="mb-3">
                        <label for="patentNameEdit" class="form-label">专利名</label>
                        <input type="text" class="form-control" id="patentNameEdit" required>
                    </div>
                    <div class="mb-3">
                        <label for="ownerEdit" class="form-label">专利持有者</label>
                        <input type="text" class="form-control" id="ownerEdit" required>
                    </div>
                    <div class="mb-3">
                        <label for="transactionPriceEdit" class="form-label">交易价</label>
                        <input type="number" step="0.01" class="form-control" id="transactionPriceEdit" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveEditedPatent()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    /**
     * 从服务器获取专利信息并显示在表格中
     */
    // 获取专利信息并显示在表格中
    function fetchPatents() {
        $.ajax({
            url: '/api/patents',
            type: 'GET',
            success: function(data) {
                let tableBody = $('#patentTableBody');
                tableBody.empty();
                data.forEach(function(patent) {
                    let row = `<tr>
                                <td>${patent.patentID}</td>
                                <td>${patent.patentName}</td>
                                <td>${patent.owner}</td>
                                <td>${patent.transactionPrice.toFixed(2)}</td>
                                <td>
                                    <button class="btn btn-sm btn-warning" onclick="editPatent(${patent.patentID})">编辑</button>
                                    <button class="btn btn-sm btn-danger" onclick="deletePatent(${patent.patentID})">删除</button>
                                </td>
                            </tr>`;
                    tableBody.append(row);
                });
            }
        });
    }

    /**
     * 添加新专利
     */
    // 添加专利
    function addPatent() {
        let patentName = $('#patentName').val();
        let owner = $('#owner').val();
        let transactionPrice = parseFloat($('#transactionPrice').val());
        $.ajax({
            url: '/api/patents',
            type: 'POST',
            data: JSON.stringify({
                patentName: patentName,
                owner: owner,
                transactionPrice: transactionPrice
            }),
            contentType: 'application/json',
            success: function() {
                $('#addPatentModal').modal('hide');
                fetchPatents();
            }
        });
    }


    // 编辑专利（此处仅提供示例，实际应实现完整的编辑功能）
    // function editPatent(patentID) {
    //     alert('编辑专利功能尚未实现');
    // }
    function editPatent(patentID) {
        // 显示编辑模态框
        $('#editPatentModal').modal('show');

        // 加载专利信息
        $.ajax({
            url: '/api/patents/' + patentID,
            type: 'GET',
            success: function(data) {
                $('#patentIdEdit').val(data.patentID);
                $('#patentNameEdit').val(data.patentName);
                $('#ownerEdit').val(data.owner);
                $('#transactionPriceEdit').val(data.transactionPrice);
            }
        });
    }

    // 保存编辑后的专利
    function saveEditedPatent() {
        let patentID = $('#patentIdEdit').val();
        let patentName = $('#patentNameEdit').val();
        let owner = $('#ownerEdit').val();
        let transactionPrice = parseFloat($('#transactionPriceEdit').val());

        $.ajax({
            url: '/api/patents',
            type: 'PUT',
            data: JSON.stringify({
                patentID: patentID,
                patentName: patentName,
                owner: owner,
                transactionPrice: transactionPrice
            }),
            contentType: 'application/json',
            success: function() {
                $('#editPatentModal').modal('hide');
                fetchPatents();
            }
        });
    }

    /**
     * 删除指定专利
     * @param {number} patentID - 专利编号
     */
    // 删除专利
    function deletePatent(patentID) {
        $.ajax({
            url: '/api/patents/' + patentID,
            type: 'DELETE',
            success: function() {
                fetchPatents();
            }
        });
    }
    // 搜索专利
    function searchPatents() {
        let query = $('#searchInput').val();
        $.ajax({
            url: '/api/patents/search?q=' + encodeURIComponent(query),
            type: 'GET',
            success: function(data) {
                let tableBody = $('#patentTableBody');
                tableBody.empty();
                data.forEach(function(patent) {
                    let row = `<tr>
                            <td>${patent.patentID}</td>
                            <td>${patent.patentName}</td>
                            <td>${patent.owner}</td>
                            <td>${patent.transactionPrice.toFixed(2)}</td>
                            <td>
                                <button class="btn btn-sm btn-warning" onclick="editPatent(${patent.patentID})">编辑</button>
                                <button class="btn btn-sm btn-danger" onclick="deletePatent(${patent.patentID})">删除</button>
                            </td>
                        </tr>`;
                    tableBody.append(row);
                });
            }
        });
    }

    // 页面加载时初始化专利信息列表
    // 初始化页面时获取专利信息并显示在表格中
    $(document).ready(function() {
        fetchPatents();
    });
</script>
</body>
</html>
